
<template>
    <div style="">
        <v-simple-table dense>
            <template v-slot:default>
                <thead>
                <tr>
                    <th class="text-left" style="width: 150px">图片</th>
                    <th class="text-left" v-if="is_text">文字内容</th>
                    <th class="text-left">链接</th>
                    <th>打开方式</th>
                    <th>操作</th>
                </tr>
                </thead>
                <draggable v-model="data" tag="tbody">
                    <tr v-for="(item, index) in data" :key="index" >
                        <td style="cursor: move" class="pa-0">
                            <v-img contain :src="item.url" style="width: 200px; max-height:120px" ></v-img>
                        </td>
                        <td v-if="is_text">
                            <v-text-field v-model="item.text" placeholder="文字内容"></v-text-field>
                        </td>
                        <td>
                            <v-text-field v-model="item.herf" placeholder="跳转链接"></v-text-field>
                        </td>
                        <td>
                            <v-select :items="targetItem"  clearable v-model="item.target" label="打开方式"> </v-select>
                        </td>
                        <td>
                            <v-btn text @click="remove(index)">删除</v-btn>
                        </td>
                    </tr>
                </draggable>

                <tbody>
                <tr >
                    <td class="pa-0">
                        <ImageUpload v-model="image"></ImageUpload>
                    </td>
                    <td v-if="is_text">
                        <v-text-field v-model="text" placeholder="文字内容"></v-text-field>
                    </td>
                    <td>
                        <v-text-field v-model="link" placeholder="跳转链接"></v-text-field>
                    </td>
                    <td>
                        <v-select :items="targetItem"  clearable v-model="target" label="打开方式"> </v-select>
                    </td>
                    <td>
                        <v-btn depressed @click="addNewItem">
                            <v-icon>mdi-plus</v-icon>添加
                        </v-btn>
                    </td>
                </tr>
                </tbody>
            </template>
        </v-simple-table>
    </div>
</template>

<script>
import {left} from "@popperjs/core";
import ImageUpload from "../../../../widgets/ImageUpload.vue";
import draggable from 'vuedraggable';

export default {
    components: {ImageUpload,draggable},
    props: {
        is_text:{
            type: Boolean,
            default: true
        },
        data: {
            type: Array,
        },
        id: {
            type: Number,
        }
    },
    data(){
      return{
          text: '',
          image: "",
          link: '',
          target: '_blank',
          targetItem: [
              { value: '_blank', text: '新窗口' },
              { value: '_self', text: '当前窗口' },
          ],
      }
    },
    methods: {
        remove(i) {
            this.data.splice(i, 1);
        },
        addNewItem() {
            const item = {
                url : this.image,
                text : this.text,
                herf : this.link,
                target : this.target
            }
            this.data.push(item);
            this.image = '';
            this.link = '';
            this.text = '';
            this.target = '_blank';
        },
    },
};
</script>
